<template>
  <div class="mainor">
    <el-form
      :inline="true"
      :rules="rules"
      :model="orderForm"
      class="demo-form-inline"
      ref="userListFrom"
      label-width="100px"
    >
      <div class="main_spac1 paddingBottom5">
        <div class="main_white padding10 paddingBottom0">
          <div class="main_crumbs boxdq">
            <div class="main_crumbs_l">
              <a href="javascript:;" @click="$router.back(-1)">
                <i class="el-icon-arrow-down"></i>返回
              </a>
              <em>|</em>
              <span>菜谱订单</span>
            </div>
          </div>
          <div class="marginBottom5 marginTop15">
            <el-form-item
              label="用户名称："
              prop="name_uid"
              class="marginBottom5"
              :rules="rules.name_uid"
            >
              <el-autocomplete
                v-model.trim="orderForm.name_uid"
                :trigger-on-focus="true"
                ref="company"
                :disabled="true"
                :fetch-suggestions="
                  (queryString, cb) => {
                    basicquerySearchAsync(queryString, cb);
                  }
                "
                placeholder="用户名称"
                clearable
                class="wid240 main_comm"
                :highlight-first-item="true"
                value-key="nickname"
                @select="
                  (item) => {
                    basicChange(item);
                  }
                "
              >
                <template slot-scope="{ item }">
                  <div class="main_name">
                    <span> {{ item.nickname }}</span>
                    <span class="main_addr" v-if="info.show_member_code == 1">{{
                      item.info.code
                    }}</span>
                  </div>
                </template>
              </el-autocomplete>
            </el-form-item>
            <el-form-item label="就餐日期：" prop="remark">
              <el-input
                v-model.trim="orderForm.remark"
                placeholder="就餐日期"
                clearable
              ></el-input>
            </el-form-item>
          </div>
        </div>
      </div>
      <div class="main_spac1" style="padding-bottom: 5px; padding-top: 5px">
        <div class="main_white padding10">
          <AddDateMenu :dateTimes="times" ref="dateMenu"></AddDateMenu>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import {
  member_getMembers,
} from "@/api/order/orderList";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import AddDateMenu from '../list/components/AddDateMenu.vue'
export default {
  components: { AddDateMenu },
  data() {
    return {
      orderForm: {
        name_uid: '',
        remark: '',
        uid: ''
      },
      rules: {
        name_uid: [
          { required: true, message: "用户名称不能为空", trigger: "change" }
        ],
        remark: [
          { required: true, message: "菜谱订单不能为空", trigger: "blur" }
        ]
      },
      tableData: [],
      listLoading: false,
      times: ['2024-09-22', '2024-09-23']
    }
  },
  methods: {
    // 用户搜索
    basicquerySearchAsync(queryString, cb) {
      if (queryString) {
        let data = Object.assign(
          {
            sign: Md5(
              objKeySort(
                Object.assign(apiUrl().name, { name: queryString.trim() })
              ) + apiUrl().appsecret
            ),
          },
          apiUrl().name,
          { name: queryString.trim() }
        );
        member_getMembers(data).then((res) => {
          if (res.errcode == 0) {
            var results = res.data.list;
            this.$refs.searchSelect.activated = true;
            cb(results);
          } else {
            this.$message.error(res.errmsg);
            cb([]);
          }
        });
      }
    },
    basicChange(val) {
      this.monitorForm.uid = val.id;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { id: val.id })) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { id: val.id }
      );
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.mainor_zh {
  padding-top: 5px;
  padding-bottom: 5px;
  em {
    color: $colour_18;
    font-size: $font_14;
    display: inline-block;
    width: 90px;
    text-align: right;
    margin-right: 9px;
  }
  span {
    color: $colour_18;
    font-size: $font_14;
    margin-right: 15px;
  }
}
.paddingLeft38 {
  padding-left: 18px;
}
</style>